import React, { Component, Fragment } from 'react';
import { Card, Icon, Tooltip, Button } from 'antd';
import QueueAnim from 'rc-queue-anim';
import styles from './List.less';

class List extends Component {
  render() {
    const {
      data,
      loading,
      handleDelete,
    } = this.props;

    const listItem = (v) => (
      <Card
        key={v.id}
        title={`${v.machineName}（${v.lengthOfUse + ' h'}）`}
        extra={(
          <div className={styles.operationWrapper}>
            <Tooltip title={<Button type="danger" onClick={() => handleDelete(v)}>确定</Button>}>
              <Icon type="delete" theme="filled" className={styles.icon} style={{ marginLeft: 12 }} />
            </Tooltip>
          </div>
        )}
        style={{ marginTop: 12 }}>
        {v.repairCondition}
      </Card>
    );

    return (
      <Card loading={loading} className={styles.container}>
        <QueueAnim>
          {data.map(listItem)}
        </QueueAnim>
      </Card>
    );
  }
}

export default List;
